<head>
<link rel="stylesheet" href="style.css">
</head>
<template>

  <!--背景图片-->
  <div class="back">
    <!--头部logo-->
    <div style="height: 122px; line-height: 60px;margin-bottom: 2px;text-align: center">
      <span style="font-family: 华文行楷;font-size: 50px;margin-top: 30px">福州历史文化博物馆</span>
      <br>

      <span style="font-family: 'Times New Roman';font-size: 20px;">Fuzhou Historical and Cultural Museum</span>
    </div>

    <el-dialog title="个人信息" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="form">
        <el-form-item label="姓名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="head">
          <el-upload
              class="avatar-uploader"
              :action="'http://localhost:9090/api/file/upload?token=' + this.admin.token"
              :show-file-list="false"
              :on-success="handleCoverSuccess"
          >

            <img v-if="form.head" :src="form.head " class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">修 改</el-button>
      </div>
    </el-dialog>
    <el-dialog title="留言消息" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="parentId" label="留言景点" width="150"></el-table-column>
        <el-table-column property="content" label="留言信息" width="200"></el-table-column>
        <el-table-column property="createtime" label="留言时间"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="FormVisible" width="30%">
      <el-form :model="pass" label-width="100" px ref="formRef" :rules="rules">
        <el-form-item label="旧密码" prop="password">
          <el-input v-model="pass.password" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPass">
          <el-input v-model="pass.newPass" autocomplete="off" show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="FormVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePass">确 定</el-button>
      </div>
    </el-dialog>


    <!--导航条-->
    <el-menu router
             class="el-menu-demo"
             mode="horizontal"
             background-color="#545c64"
             text-color="#fff"
             active-text-color="#ffd04b">
      <el-menu-item style="font-size: 20px;margin-left: 620px ;color: white" index="/hello">首页</el-menu-item>
      <el-menu-item style="font-size: 20px" index="/going_fuzhou">走进福州</el-menu-item>
      <el-menu-item style="font-size: 20px" index="/zixun_fuzhou">福州资讯</el-menu-item>
      <el-menu-item style="font-size: 20px" index="/history">发展历史</el-menu-item>
      <el-menu-item style="font-size: 20px" index="/tese_wenhua">特色文化</el-menu-item>
      <el-menu-item style="font-size: 20px" index="/lvyou_zhinan">旅游指南</el-menu-item>
      <div v-if="admin.username==null" style="margin-left: 1830px;margin-top: 10px">
        <el-button @click="$router.push('/login')">登录</el-button>
      </div>
      <div style="margin-top:10px;flex: 1;text-align: right ;padding-right: 20px">
        <div v-if="admin.username!=null">
          <el-dropdown size="medium">
            <span class="el-dropdown-link" style="cursor: pointer">
              <el-avatar :src="form.head"></el-avatar>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="dialogFormVisible=true">个人信息</el-dropdown-item>
              <el-dropdown-item @click.native="dialogTableVisible=true">我的留言</el-dropdown-item>
              <el-dropdown-item @click.native="FormVisible=true">修改密码</el-dropdown-item>
              <el-dropdown-item v-if="admin.identity===0">
                <div @click="$router.push('/home')">后台管理</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div style="width: 50px; text-align: center" @click="logout">退出</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-menu>
    <!--轮播图-->

    <el-carousel :interval="4000" type="card" height="500px" indicator-position="none" interval="2500">
      <el-carousel-item v-for="item in list" :key="item">
        <h3 class="small">
          <img :src="item.img" style="height: 100%;width: 100%;">
        </h3>
      </el-carousel-item>
    </el-carousel>
    <div style="margin-left: 940px;margin-top: 25px">
      <img src="@/assets/arr_1.png">
    </div>

    <!--首页展示-->
    <div style="margin-top: 0px ">
      <el-row>
        <el-col>
          <el-card
              style="position: relative;margin-left: 350px;width: 62%;background-color: transparent;box-shadow: none;height: 280px;border: none">
            <!--发展历史-->
            <el-card :border="false"
                     style="left:18px;position: absolute; top: 0px; height: 400px;width: 600px;box-shadow: none;background-color: cornsilk ">
              <div style="margin-left: 350px" class="fontbiaot">
                发展历史
                <img src="@/assets/inc_ct_news.png"></div>
              <br>
              <div class="btns">
              <span v-for="history in historyname" class="item">
                  <button class="button" style="margin-left:13px" @click="$router.push('/age?id='+history.id)">
                                     <div style="margin-left:10px;font-family: 楷体;font-size: large" class="btndiv">
                                       {{ history.name }}
                                     </div>
                  </button>
              </span>
              </div>
            </el-card>
            <!--新闻资讯-->
            <el-card :border="false"
                     style="position: absolute; top: 0px; left: 600px;height: 400px;width: 600px;box-shadow: none;
                     background-color: cornsilk;">
              <div class="fontbiaot" style="float: left">
                <img src="@/assets/inc_ct_open.png"> 新闻资讯</div>
              <span style="float: left;margin-left: 260px;font-size: 9px;color: #8c939d;cursor:pointer" @click="$router.push('zixun_fuzhou')">
                查看更多===>
              </span>
              <br>
              <br>
              <span v-for="item in items.slice(0,5)"  >
                                     <div
                                         style="padding-top:10px;margin-left:10px;cursor:pointer" @click="$router.push('/newFuzhou?id='+item.id)"  >
                                       <li>{{ item.title }}</li>
                                     </div>

                                    </span>
            </el-card>

          </el-card>
        </el-col>
      </el-row>
      <div class="card-container">
        <!--特色文化-->

        <el-card :border="false" style="height: 300px;width: 600px;background-color: cornsilk" class="card-item">
          <div style="writing-mode:vertical-lr;margin-left: 50px;margin-top: 30px;float: left">
            <span class="fontbiaot">特 色 文 化</span>
          </div>
          <div style="pxfloat:left;float: left">
            <img style="width: 210px;margin-left: 120px;cursor:pointer" src="@/assets/tesewenhua.jpg" @click="$router.push('tese_wenhua')">
          </div>


        </el-card>
        <!--旅游景点-->
        <el-card :border="false" style="height: 300px;width: 600px;background-color: cornsilk; box-shadow: none;"
                 class="card-item">
          <div>
            <span style="writing-mode:vertical-lr;margin-top: 30px;float: right" class="fontbiaot">旅 游 景 点</span>
          </div>
          <div style="pxfloat:left;float: right;margin-right: 90px">
            <img style="width: 380px; cursor:pointer" src="@/assets/lvyou.jpg" @click="$router.push('lvyou_zhinan')">
          </div>

        </el-card>
      </div>


    </div>

    <!--底部图片-->
    <div style="margin-left: 370px;">
      <img style="width: 1160px;height: 300px" src="@/assets/hexingjiazhiguan.jpg">
    </div>
    <!--页脚-->
    <div>
      <el-card style="width: 1900px;background-color:rgba(30, 144, 255,0.1);border: none;">
        <div style=" text-align: center">

            <span style="font-size: 30px;font-weight:bolder ;color: black;">福 州 历 史 文 化 博 物 馆</span>
            <br>
            <span style="font-family: 'Times New Roman';margin-left: 45px"> Fuzhou Historical and Cultural Museum </span>
            <br>
            <span>  </span>
            <br>
            <span>有任何疑问请联系管理员</span>
            <br>
            <br>
            <span style="font-size: large;font-weight:bolder;color: black;">管理员电话:</span>
            <span>  </span>
            <span>123-456789</span>
            <br>
            <br>
            <b style="font-family: 楷体;">福州历史  版权所有©</b>


        </div>

      </el-card>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import request from "@/util/request";
import Background from "@/views/going/background";

export default {
  name: "hello",
  components: {Background},
  data() {
    return {
      pass: {
        username: ""
      },
      gridData: [{
        parentId: "",
        content: "",
        createtime: "",
      }],
      list: [{img: require('@/assets/img1.jpg')}, {img: require('@/assets/img2.jpg')}, {img: require('@/assets/img3.jpg')}],
      items: {},
      admin: Cookies.get('admin') ? JSON.parse(Cookies.get('admin')) : {},
      dialogFormVisible: false,
      FormVisible: false,
      dialogTableVisible: false,
      form: {
        username: '',
        phone: '',
        email: '',
        head: '',
        status: "1"
      },
      formLabelWidth: '120px',
      rules: {
        newPass: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
          {min: 6, max: 12, message: "长度在6-12个字符", trigger: 'blur'}
        ]
      },
      historyname: [],
      tesewenhua: {},

    }
  },
  created() {
    //this.form=this.admin;
    this.loadTese_wenhua()
    this.load()
    this.loadhistory()
    this.mes()

    const id = this.admin.id
    request.get('/admin/' + id).then(res => {
      this.form = res.data;
      console.log(this.form)
    })
  },
  methods: {
    load() {
      request.get("/newFz/all").then(res => {
        if (res.code == "200") {
          this.items = res.data
          //console.log(this.admin.username)

        }
      })
    },
    loadhistory() {
      request.get("/history/name").then(res => {
        if (res.code == "200") {
          this.historyname = res.data
          //console.log(this.historyname)
        }
      })
    },
    loadTese_wenhua() {
      request.get("/wenhua/all").then(res => {
        if (res.code == "200") {
          this.tesewenhua = res.data
          //console.log(this.text)
        }
      })
    },
    handleCoverSuccess(res) {
      if (res.code === '200') {
        //console.log(res.data)
        // this.$set(this.form, 'cover', res.data)
        this.form.head = res.data
      }
    },
    savePass() {
      this.pass.username = this.admin.username;
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          request.put("/admin/pass", this.pass).then(res => {
            if (res.code == '200') {
              this.$notify.success("修改成功")
              this.FormVisible = false
              Cookies.remove("admin")
              this.$router.push("/login")
            } else {
              this.$notify.error(res.msg)
            }
          })
        }
      })
    },
    mes() {
      const _id = this.admin.id//当前用户id
      request.get("/travel/usermes/" + _id).then(res => {
        if (res.code == "200") {
          this.gridData = res.data
        }
      })
    },
    update() {
      request.put("/admin/update", this.form).then(res => {
        if (res.code == "200") {
          this.dialogFormVisible = false;
          this.$notify.success("修改成功")

        } else {
          this.$notify.error(res.msg)
        }
      })
    },
    logout() {
      //退出时清空cookie
      Cookies.remove('admin')
      this.$router.push("/login")
    }
  }
}
</script>

<style>

.fontbiaot {
  font-size: 30px;
  font-family: 华文隶书;
  font-weight: bold;
}

.card-container {
  display: flex;
  width: 1165px;
  margin-left: 365px;
}

.card-item {
  flex: 1;
}

.btns {
  position: absolute;
  top: 73px;
  left: 10px;
}

.button {
  background-color: #f4511e;
  border: none;
  color: white;
  padding: 8px 16px;
  width: 122px;
  text-align: center;
  margin: 20px 5px;
  opacity: 0.6;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

.btndiv {
  margin-left: 0px !important;
}

.button:hover {
  opacity: 1
}

.item {
  display: inline-block;
  margin-right: -3px; /* 可以添加一些间距 */
}

</style>
